<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">仓库类型:</p>
			</el-col>
			<el-col :span="4" style="margin-right: 20px;">
				<el-select size="small" v-model="condition.warehouseType" placeholder="请选择仓库类型" clearable>
					<el-option v-for="item in warehouseType" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">仓库状态:</p>
			</el-col>
			<el-col :span="4" style="margin-right: 20px;">
				<el-select size="small" v-model="condition.status" placeholder="请选择仓库状态" clearable>
					<el-option label="已启用" value="1"></el-option>
					<el-option label="已停用" value="0"></el-option>
				</el-select>
			</el-col>
			<el-col :span="10" style="padding-left: 0px;text-align: right">
				<el-button type="primary" size="small" v-on:click='warehouseQuery'>查询</el-button>
				<el-button type="primary" size="small" v-on:click='add'>新增</el-button>
				<el-button type="primary" size="small" v-on:click='startCom'>启用</el-button>
				<el-button type="primary" size="small" v-on:click='stopCom'>停用</el-button>
				<el-button type="primary" size="small" v-on:click='editCom'>编辑</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table :data="tableData.dataList" border style="width: 100%;align-content: center;" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="60">
					</el-table-column>
					<el-table-column label="仓库代码" prop="warehouseCode">
					</el-table-column>
					<el-table-column label="仓库名称" align="right" prop="warehouseName">
					</el-table-column>
					<el-table-column label="仓库类型" align="right" prop="warehouseType" :formatter="warehouseTypeCov">
					</el-table-column>
					<el-table-column label="仓库状态" align="right" prop="status" :formatter="statusCov">
					</el-table-column>
					<el-table-column label="停用日期" align="right" prop="stopDate">
					</el-table-column>
					<!--<el-table-column label="操作" align="right" width="80">
						<template scope="scope">
							<el-tooltip class="item" effect="light" content="佣金" placement="top">
								<el-button type="primary" size="mini" icon="setting" @click.native.prevent="info(scope.$index)"></el-button>
							</el-tooltip>
						</template>
					</el-table-column>-->
				</el-table>
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>

		<el-dialog title="仓库维护" v-model="warehouseFormShow" size="small">
			<el-form :model="warehouseFormData" ref="warehouseForm" :rules="Rule" label-width="150px" style="height: 150px;">
				<el-col :span="12">
					<el-form-item label="仓库简称：" prop="warehouseName" required>
						<el-input size="small" v-model="warehouseFormData.warehouseName"></el-input>
						<p class="shili">示例：润华天众一库</p>
					</el-form-item>

				</el-col>

				<el-col :span="12">
					<el-form-item label="仓库代码：" prop="warehouseCode" required>
						<!--<input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">-->
						<el-input size="small" v-model="warehouseFormData.warehouseCode" @blur='noChinese(warehouseFormData.warehouseCode)'>
						</el-input>
						<p class="shili">示例:RHTZ_001</p>
					</el-form-item>

				</el-col>

				<!--<el-col :span="12" >
					
				</el-col>
				<el-col :span="12" class = "shili">
					
				</el-col>
				-->
				<el-col :span="12">
					<el-form-item label="仓库类型：" prop="warehouseType" required>
						<el-select size="small" v-model="warehouseFormData.warehouseType" placeholder="选择仓库类型" @change="oAddress">
							<el-option v-for="item in warehouseType" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="仓库地址：" prop="warehouseAddress" required>
						<el-input size="small" v-model="warehouseFormData.warehouseAddress">
						</el-input>
					</el-form-item>
				</el-col>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="warehouseFormShow = false">取 消</el-button>
				<el-button type="primary" v-on:click='save'>提 交</el-button>
			</div>
		</el-dialog>

	</div>
</template>
<script>
	import moment from 'moment'
	export default {
		data: function() {
			return {

				//仓库类型下拉
				warehouseType: [],

				//仓库类型转换
				warehouseConvertData: {},

				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,
				//公司数据
				tableData: {
					total: 0,
					dataList: []
				},

				condition: {
					warehouseType: "",
					status: "",
				},

				warehouseFormShow: false,
				//校验规则
				Rule: {
					warehouseCode: [{
						required: true,
						message: '请输入仓库代码',
						trigger: 'blur'
					}],
					warehouseName: [{
						required: true,
						message: '请输入仓库名称',
						trigger: 'blur'
					}],
					warehouseType: [{
						required: true,
						message: '请选择仓库类型',
						trigger: 'blur'
					}],
					warehouseAddress: [{
						required: true,
						message: '请输入仓库地址',
						trigger: 'blur'
					}],
				},
				//校验规则
				Rules: {},
				warehouseFormData: {

					//id: "",
					unitId: "",
					warehouseCode: "",
					warehouseName: "",
					warehouseType: "1",
					warehouseAddress: "",
					status: "",
					companyId: "",
					stopDate: "",

				},
				emptyWarehouseFormData: {

					//id: "",
					unitId: "",
					warehouseCode: "",
					warehouseName: "",
					warehouseType: "1",
					warehouseAddress: "",
					status: "",
					companyId: "",
					stopDate: "",

				},

				multipleSelection: [],
				companyId: "",
				//address:"",
			}
		},
		methods: {
			// 限制输入中文字符
			noChinese: function(val) {
				var chinese = new RegExp("[\\u4E00-\\u9FFF]+", "g");　　
				if(chinese.test(val)) {
					this.$message.error("仓库代码格式不正确");
					this.warehouseFormData.warehouseCode = "";
				}
			},
			//仓库状态转换
			statusCov: function(row, column) {
				return row.status == "0" ? '已停用' : '已启用';
			},

			//仓库类型解析
			warehouseTypeCov: function(row, column) {
				return this.$data.warehouseConvertData[row.warehouseType];
			},
			warehouseTypeCovert: function() {
				this.$http.get(this.API_ROOT + '/base/dict/convert', {
					params: {
						group: "warehouse"
					}
				}).then((response) => {
					this.$data.warehouseConvertData = response.data;
				}, (response) => {});
			},

			//选择框
			handleSelectionChange: function(val) {
				debugger;
				this.$data.multipleSelection = val;
			},

			add: function() {
				this.$data.warehouseFormData = Object.assign(this.$data.warehouseFormData, this.$data.emptyWarehouseFormData);
				this.$data.warehouseFormShow = true;
				this.address();
			},

			oAddress: function(val) {
				debugger;
				if(val != '1') {

					this.$data.warehouseFormData.warehouseAddress = "";
				}

				if(val == '1') {

					this.address();
				}

			},

			//启用仓库
			startCom: function() {
				if(this.$data.multipleSelection.length == 1) {
					debugger;
					var resRoleData = this.$data.multipleSelection[0];
					this.$http({
						method: 'POST',
						url: this.API_ROOT + '/scm/warehouse/start',
						params: {
							id: resRoleData.id,
						}
					}).then(function(resp) {
						if(resp.data.success) {
							// es5写法
							debugger;
							this.$message(resp.data.msg);
							this.warehouseQuery();
						} else {
							//debugger;
							this.$message.error(resp.data.msg);
						}
					}, function(error) {})
				} else {
					this.$message.error("请选择一条数据");
				}
			},
			//停用仓库
			stopCom: function() {
				if(this.$data.multipleSelection.length == 1) {
					var resRoleData = this.$data.multipleSelection[0];
					this.$http({
						method: 'POST',
						url: this.API_ROOT + '/scm/warehouse/stop',
						params: {
							id: resRoleData.id,
						}
					}).then(function(resp) {
						if(resp.data.success) {
							// es5写法
							debugger;
							this.$message(resp.data.msg);
							this.warehouseQuery();
						} else {
							//debugger;
							this.$message.error(resp.data.msg);
						}
					}, function(error) {})
				} else {
					this.$message.error("请选择一条数据");
				}
			},

			//新增仓库时调用接口查询公司地址
			address: function() {
				this.$http.post(this.API_ROOT + '/scm/warehouse/address', {
					params: {}
				}).then(resp => {
					if(resp.data.success) {
						// es5写法
						debugger;
						this.$data.warehouseFormData.warehouseAddress = resp.data.data.oAddress;
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => {});
			},

			//编辑仓库
			editCom: function() {
				debugger;
				if(this.$data.multipleSelection.length == 1) {
					var resRoleData = this.$data.multipleSelection[0];
					this.$http.get(this.API_ROOT + '/scm/warehouse/info', {
						params: {
							id: resRoleData.id
						}
					}).then((response) => {
						debugger;
						this.$data.warehouseFormData = Object.assign(this.$data.warehouseFormData, response.data.data);
					}, (response) => {
						// error callback
					});
					this.$data.warehouseFormShow = true;
				} else {
					this.$message.error("请选择一条数据");
				}
			},

			//查询仓库
			warehouseQuery: function() {
				debugger;
				this.$http.post(this.API_ROOT + '/scm/warehouse/page', this.$data.condition, {
					params: {
						start: this.$data.CurentPage,
						limit: this.$data.page.pageSize
					}
				}).then(resp => {
					if(resp.data.success) {
						resp.data.total = parseInt(resp.data.total);
						// es5写法
						this.$data.tableData = resp.data;
						//this.baseQuery(this.$data.curTreeDeptId);
						//this.$data.exFormShow = false;
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => {});
			},

			//保存仓库
			save: function() {
				this.$refs.warehouseForm.validate(function(valid, $event) {
					// 验证通过
					if(valid) {
						debugger;
						this.$http.post(this.API_ROOT + '/scm/warehouse/save', this.$data.warehouseFormData)
							.then(resp => {
								if(resp.data.success) {
									debugger;
									this.warehouseQuery();
									this.$data.warehouseFormShow = false;
									this.$message(resp.data.msg);
								} else {
									this.$message.error(resp.data.msg);
								}
							}, resp => {

							});
					} else {
						return false
					}
				}.bind(this))
			},

			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				//this.$data.dictGroup = '';
				this.warehouseQuery();
			},
		},
		//表单创建时执行
		created: function() {
			this.warehouseTypeCovert();
			this.warehouseQuery();

			//获取仓库类型下拉
			this.$http.get(this.API_ROOT + '/base/dict/combo', {
				params: {
					group: "warehouse"
				}
			}).then((response) => {
				this.$data.warehouseType = response.data;
			}, (response) => {});

		}
	}
</script>
<style>
	.el-table .info-row {
		height: 10px !important;
	}
	
	.item {
		width: 30px;
	}
	
	.el-form-item {
		clear: both;
	}
	
	.el-dropdown .el-button-group,
	.el-table .el-tooltip,
	.el-table .el-tooltip__rel {
		display: inline;
	}
	
	.el-table {
		height: 100%;
		width: 100%;
	}
	
	#el-select {
		width: 200px;
	}
	
	.shili {
		/*padding-left: 60px;*/
		font-size: 12px;
		color: #999999;
	}
</style>